<template>
  <div class="dataset-info-table">
    <u-table
      :data="tableData"
      :border="true"
      :height="height"
      :show-body-overflow="'tooltip'"
      :show-header-overflow="'tooltip'"
      stripe
      use-virtual
      style="width: 100%;"
    >
      <u-table-column
        :type="'index'"
        :resizable="false"
        :lebel="'序号'"
        :prop="'$$$序号$$$'"
        :width="60"
        fixed
      >
        <span slot-scope="{ $index }" class="data-cell index" :index="$index">
          <span class="data-index">
            {{ $index + 1 + indexStart }}
          </span>
        </span>
      </u-table-column>
      <u-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
      >
        <template #default="scope">
          <div>{{ scope.row[column.prop] }}</div>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
// @ts-ignore
import { UTable, UTableColumn } from 'umy-table'
import 'umy-table/lib/theme-chalk/index.css'

@Component({
  components: {
    UTable,
    UTableColumn,
  },
})
export default class AuditDataTable extends Vue {
  private tableColumns = [
    { label: '编号', prop: 'id', width: 70 },
    { label: '数据表名', prop: 'tableName', width: 150 },
    { label: '用户名', prop: 'username', width: 150 },
    { label: '数据类型', prop: 'datatype', width: null },
    { label: '行数', prop: 'rowNumber', width: 100 },
    { label: '字段信息', prop: 'fields', width: 150 },
    { label: '存储数据源', prop: 'savetype', width: 300 },
    { label: '修改事件', prop: 'createTime', width: 150 },
  ]
  @Prop({ type: Array, default: () => [] }) tableData!: any[]
  @Prop({ type: Number, default: 600 }) height!: number
  @Prop({ type: Number, default: 1 }) pageSize!: number
  @Prop({ type: Number, default: 20 }) currentPage!: number

  public get indexStart() {
    return this.pageSize * (this.currentPage - 1)
  }
}
</script>

<style lang="less" scoped>
.dataset-info-table {
  background-color: #fff;

  .audit-table-column {
    display: inline-block;
    max-width: 100%;
  }
}
</style>
